<!DOCTYPE html>
<html lang="ch">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" href="./../css/common.css" />
	<link rel="stylesheet" href="./../css/btns.css" />
	<body oncontextmenu="return false;" onselectstart="return false"></body>
	<style>
		html, body {
			width: 450px;
		}

		.box {
			width: 100%;
			height: 500px;
			background: #f0fffa;
		}

		.name {
			padding:5px;
			font-size: 14px;
		}

		.pgsbar-box {
			height: 25px;
			margin: 0px 5px;
			position: relative;
			background: #5eacd1;
		}

		.pgsbar-box>div {
			position: absolute;
		}

		.pgsbar {
			height: 4px;
			width: 100%;
			top: 10px;
		}

		.pgsbar-bk {
			background: #E0E4FE;
			cursor: pointer;
		}

		.pgsbar-played {
			cursor: pointer;
			background: #0000FF;
		}

		.pgsbar-thumb {
			border-radius: 50%;
			border:1px solid #febe0b;
			height: 10px;
			width: 10px;
			background: #febe0b;
			top: 6px;
			cursor: pointer;
		}

		.pgsbar-thumb:active {
			border:1px solid #FF3300;
		}

		.panel-tabs {
			margin-top: 5px;
			margin-bottom: 5px;
			text-align: left;
		}

		.times {
			width: 140px;
		}

		.panel-tabs li {
			display: inline-block;
			vertical-align: baseline;
			margin-right:12px;
		}

		.font-icons:hover {
			color: #d40000;
		}

		.font-icons-btn:active, .now-status {
			color: #d40000;
		}

		.font-icons-btn:active {
			-webkit-text-stroke: 2px #d40000;
		}


		.play-type-box {
			position: relative;
		}

		.play-type-ul {
			position: absolute;
			top:25px;
			left: 5px;
			border:1 px solid #0066CC;
			background:#F7F7F7;
		}
		.play-type-ul li {
			display: block;
		}
		.play-type-ul li:hover {
			background:#ddfcfc;
		}

		.labels {
			display: inline-block;
			/* width: 80px; */
			padding: 5px;
			text-align: center;
			background: #ddfcfc;
		}

		.rows {
			height: 437px;
			overflow-y: auto;
			background: #EEEEEE;
		}

		.rows ul {
			cursor:pointer;
		}

		.rows ul:nth-child(odd) {
			background: #FFFFFF;
		}

		.rows ul:hover {
			background:#e9f5dc;
		}

		.play-title {
			background: #c2dff3;
			color: #28a745;
		}

		.play-list li {
			display: inline-block;
			text-align: left;
			padding: 4px;
		}

		.play-list li:first-child {
			width: 7px;
		}

		.play-list li:nth-child(2) {
			width: calc(100% - 48px);
			border-left: 1px solid #FAFAFA;
		}

		.vol-li-box {
			position:relative;
		}

		.vol-box {
			z-index: 1;
			position: absolute;
			left: 5px;
			height: 70px;
			width: 3px;
			border-left: 6px solid #FFFFFF;
			border-right: 6px solid #FFFFFF;
			border-top: 2px solid #FFFFFF;
			border-bottom: 2px solid #FFFFFF;
			background: #0066CC;
		}

		/* .vol-bar {
			width: 3px;
			background: #0066CC;
			margin-left: 4px;
		} */

		.vol-btn {
			z-index: 1000;
			width: 9px;
			height: 5px;
			left: -3px;
			position: absolute;
			background: #d40000;
		}
	</style>
</head>
<body>
	<div class="box">
		<!-- 上部，设置部分 -->
		<div><!-- 进度条滑块 -->
			<div class="name" id="play-title"></div>
			<div class="pgsbar-box"  id="pgs-box">
				<div class="pgsbar pgsbar-bk" id="pgs-bak"></div>
				<div class="pgsbar pgsbar-played" style="width: 0%;" id="pgs-bar"></div>
				<!-- <div class="pgsbar-thumb" id="pgs-btn"></div> -->
				<audio id="audio" type="hidden"></audio>
			</div>
		</div>
		<!-- 下部播放列表部分 -->
		<div class="panel-tabs">
			<ul>
				<li class="labels name" id="play-list-name"></li>
				<li class="times"><span id="currentTime">0000:00</span> / <span id="duration">0000:00</span></li><!-- 现在时间/总时长 -->
				<li class="font-icons font-icons-btn font-icons-stop" id="stop-btn"></li><!-- 停止 -->
				<li class="font-icons font-icons-btn font-icons-backward" id="back-btn"></li><!-- 上一曲 -->
				<li class="font-icons font-icons-btn font-icons-play" id="play-btn"></li><!-- 播放 / 暂停 -->
				<li class="font-icons font-icons-btn font-icons-forward" id="next-btn"></li><!-- 下一曲 -->
				<li class="vol-li-box"><!-- 调节音量 -->
					<div class="font-icons font-icons-btn font-icons-volume-up" id="chg-volume-btn"></div>
					<div id="vol-box" class="vol-box">
						<div id="vol-btn" class="vol-btn" style="top:0%"></div>
						<!-- 按钮 -->
						<!-- <div class="vol-bar"></div> --><!-- 背景 -->
					</div>
				</li>
				<li class="play-type-box"><!-- 设置播放顺序 -->
					<div class="font-icons font-icons-btn font-icons-retweet" id="chg-play-switch-btn"></div>
					<ul class="play-type-ul" id="play-type-list">
						<li id="retweet-btn" class="font-icons font-icons-btn font-icons-retweet"></li><!-- 顺序循环 -->
						<li id="retweet-one-btn" class="font-icons font-icons-btn font-icons-retweet-one"></li><!-- 单曲 -->
						<li id="reorder-list-btn" class="font-icons font-icons-btn font-icons-reorder-list"></li><!-- 顺序（不循环） -->
						<li id="random-btn" class="font-icons font-icons-btn font-icons-random"></li><!-- 乱序 -->
					</ul>
				</li>
			</ul>
			<div>
				<ul class="play-list play-title">
					<li></li><li id="play-file-names"></li>
				</ul>
				<div class="rows play-list" id="play-list">
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	const logic = require('./../../src/logic/main');
	logic.init();
</script>
</html>